<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>发布评价</title>
    <link rel="stylesheet" type="text/css" href="../../../css/aui/aui.css" />
    <style>
        body {
            background: #fff;
        }

        .textarea {
            width: 100%;
            height: 6rem;
            border: 1px solid #E1E1E1;
            padding: 0.2rem;
        }

        .btn {
            background: #0689FB;
            width: 100%;
            height: 2rem;
            text-align: center;
            line-height: 2rem;
            color: #fff;
            margin: 6rem auto 3rem;
            border-radius: 0.2rem;
        }

        .tuikuan {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #E1E1E1;
            margin-top: 1rem;
        }

        .beizhu {
            margin-top: 0.5rem;
            color: #0689FB;
            font-size: 0.7rem;
        }

        .up_image_box {
            display: flex;
        }

        .up_image {
            width: 33%;
            height: 29vw;
            border: 1px solid #E1E1E1;
            box-sizing: border-box;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .up_image:last-child {
            margin-right: 0px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="aui-content-padded">
            <div class="aui-margin-b-10">
                <i class="aui-iconfont aui-icon-star"></i>
                <i class="aui-iconfont aui-icon-star"></i>
                <i class="aui-iconfont aui-icon-star"></i>
                <i class="aui-iconfont aui-icon-star"></i>
                <i class="aui-iconfont aui-icon-star"></i>
                <small style="font-size:0.6rem;color:#ccc;">（1-2星为差评，3星为中评，4-5星为好评）</small>
            </div>
            <textarea name="" id="" class="textarea" v-model="comment" placeholder="请输入评论内容"></textarea>

            <div style="margin:0.5rem 0;">
                上传照片
                <small style="font-size:0.6rem;color:#ccc;">最多上传三张图，图片大小不要超过2MB</small>
            </div>
            <div class="up_image_box">
                <div class="up_image" onclick="addImg(this,0)">
                    <img src="../../../image/icon/shangchuan.png" style="width:40%;" alt="">
                </div>
                <div class="up_image" onclick="addImg(this,1)">
                    <img src="../../../image/icon/shangchuan.png" style="width:40%;" alt="">
                </div>
                <div class="up_image" onclick="addImg(this,2)">
                    <img src="../../../image/icon/shangchuan.png" style="width:40%;" alt="">
                </div>
            </div>
            <div class="btn" @click="submit()">立即提交</div>
        </div>
    </div>
</body>
<script src="../../../script/api.js" charset="utf-8"></script>
<script src="../../../script/aui/aui-tab.js" charset="utf-8"></script>
<script src="../../../script/common/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="../../../script/common/check.js" charset="utf-8"></script>
<script src="../../../script/common/common.js" charset="utf-8"></script>
<script src="../../../script/common/config.js" charset="utf-8"></script>
<script src="../../../script/common/vue.min.js" charset="utf-8"></script>
<script>
    apiready = function() {
        api.parseTapmode();
        vm.init();
    }

    var vm = new Vue({
        el: "#app",
        data: {
            orderInfo: {},
            score: '',
            comment: "",
            comment_image_array: []
        },
        methods: {
            init() {
                this.orderInfo = api.pageParam;
                this.selectScore();
            },
            selectScore() {
                var that = this;
                $(".aui-icon-star").each(function(i) {
                    $(this).click(function() {
                      $(this).css('color', 'red').prevAll('.aui-icon-star').css('color', 'red');
                      $(this).nextAll('.aui-icon-star').css('color', '#333');
                        that.score = i + 1;
                        console.log(  that.score );

                    });
                });
            },
            submit() {
                var that = this;
                if (!is_define(this.score)) {
                    $toast("请评分");
                    return;
                } else if (!is_define(this.comment)) {
                    $toast("请输入评论内容");
                    return;
                }
                var data = {
                    order_id: this.orderInfo.order_id,
                    work_id: this.orderInfo.work_id,
                    work_user_id: this.orderInfo.work_user_id,
                    accept_user_id: this.orderInfo.accept_user_id,
                    score: this.score,
                    comment: this.comment,
                    comment_image_array: this.comment_image_array,
                };
                _ajax(Config.api.WorkUserAddComment, data, function(ret) {
                    if (ret.code === 200) {
                        api.execScript({
                            name: 'hire_person_win',
                            frameName: 'hire_person_frm',
                            script: 'vm.updateComment()'
                        });
                        $toast("发布评价成功");
                        setTimeout(function() {
                            close_w();
                        }, 1000);
                    }
                });

            }
        }
    });

    function addImg(e, i) {
        imageUpload(Config.api.ImageUploadcommon, function(ret) {
            $(e).find('img').attr('src', ret.data.imgurl).css({'width': '100%', 'height': '100%'});
            vm.comment_image_array[i] = ret.data.imgurl;
        });
    }
</script>

</html>
